<template>
  <div style="display: flex">

    <BarLineChart class="box"/>
    <HorizontalBarChart class="box" id="chart1" :data="chartData"/>
  </div>
</template>

<script setup>
import {getCurrentInstance, onMounted, onUnmounted, reactive, watch, ref} from 'vue'
import BarLineChart from "./components/BarLineChart.vue";
import HorizontalBarChart from "./components/HorizontalBarChart.vue";

const {proxy} = getCurrentInstance()
const color = ref([
  "#5470c6",
  "#91cc75",
  "#fac858",
  "#ee6666",
  "#73c0de",
  "#3ba272",
  "#fc8452",
  "#9a60b4",
  "#ea7ccc",
  "#8364FF",
  "#36F4D7",
  "#FBB03C"
])

const chartData = reactive({
  category: ['原油', '页岩气', '常规气'],
  unit: '米',
  data: [
    {wellCount: 2, value: 5, itemStyle: {color: '#1874CD'}},
    {wellCount: 1, value: 4, itemStyle: {color: '#3CB371'}},
    {wellCount: 3, value: 6, itemStyle: {color: '#EEB422'}}
  ]
})

onMounted(() => {
  // let num = 3.1445
  // console.log(typeof num.toFixed(2))
  // console.log(parseFloat(num.toFixed(2)))
  // num = 3.1565
  // console.log(parseFloat(num.toFixed(2)))
  // console.log('向下取整', Math.floor(num * 100) / 100)
  // console.log('向上取整', Math.ceil(num * 100) / 100)
  // console.log('2024年'.indexOf('月') > 0)
  //
  // let date = new Date('2022-12-01');
  // console.log(date)
})

</script>

<style lang="scss" scoped>
.box {
  height: 200px;
  width: 400px;
  margin: 5px;
  border: gray solid 1px;
  border-radius: 5px;
}
</style>
